<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="范珍">
        <title>DOM事件传播机制</title>
        <style>
            div{
                width: 600px;
                height: 600px;
                padding: 100px;
                background-color: red;
            }
            section{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div>
            <section onclick="secClick();"></section>
        </div>
        <script>
            function secClick(){
                console.log('secClick');
            }

            window.addEventListener('click',function(){
                console.log('window');
            })

            // document.documentElement:html
            document.documentElement.addEventListener('click',function(event){
                console.log('html');
                // stop：停止
                // propagation：传播
                event.stopPropagation();

            })
            document.body.addEventListener('click',function(){
                console.log('body');
            })
            
            var div = document.querySelector('div');
            div.addEventListener('click',function(){
                console.log('div');
            })

            // 事件传播的过程
            //1)捕获阶段 父标签------>子标签
            // window>html>body>div>sec
            //2)命中阶段：找到最精准的标签响应事件
            //3)冒泡阶段：子标签---->父标签
            // sec>div>body>html>window

            // para1:事件名称
            // para2：事件的回调函数
            // para3：是否监听捕获阶段的事件;默认值是false; 

            window.addEventListener('click',function(){
                console.log('window true');
            },true)

            // document.documentElement:html
            document.documentElement.addEventListener('click',function(){
                console.log('html true');
            },true)
            document.body.addEventListener('click',function(){
                console.log('body true');
            },true)
            
            div.addEventListener('click',function(){
                console.log('div true');
            },true)

        </script>
    </body>
</html>